<template>
  <div>
    <el-button
      :size="'mini'"
      type="primary"
      icon="el-icon-plus"
      @click="dlg=true"
    >添加账号</el-button>
    <el-dialog
      title="添加账号"
      :visible.sync="dlg"
      width="550px"
      custom-class="dialog-style"
    >
      <el-form
        :model="form"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="账号">
          <el-input v-model="form.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!saving" @click="dlg=false">取 消</el-button>
        <el-button type="primary" :loading="saving" @click="handleCreate">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { createAccount } from '@/svc/account'

export default {
  name: 'CreateAccount',
  props: {
    fnAdd: { type: Function, default: null }
  },
  data() {
    return {
      dlg: false,
      saving: false,
      form: {
        id: '',
        name: ''
      }
    }
  },
  methods: {
    handleCreate() {
      this.saving = true
      this.fnAdd(this, {
        id: this.form.id,
        name: this.form.name
      }).then(res => {
        if (res) {
          this.saving = false
          this.$emit('onAccountCreate', res)
          this.dlg = false
          this.$success('添加成功')
        }
      }).catch(() => {
        this.saving = false
      })
    }
  }
}
</script>

<style scoped>

</style>
